<template>

<div id="app">
  <el-container>
    <el-header style="height:70px">
      <Header></Header>
    </el-header>
    <hr>
    <el-main direction="vertical">
      <div class="body">
        <div class="navbar">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">



            <!--        可折叠式设计-->
            <el-radio-button  :label="false">展开</el-radio-button>
            <el-radio-button  :label="true">收起</el-radio-button>
          </el-radio-group>

          <div v-show="isAdmin()">
            <el-menu
              default-active="3"
              :router= this.router
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              :collapse="isCollapse"
            >
              <!--管理员页面-->
              <el-submenu index="1" v-show="isAdmin()">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span slot="title">用户（个人）管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/HostUsrInit">用户管理</el-menu-item>
                  <el-menu-item index="/HostPasswordEdit">密码修改</el-menu-item>
                  <el-menu-item index="/HostInfoEdit">个人信息</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="2" v-show="isAdmin()">
                <template slot="title">
                  <i class="el-icon-data-board"></i>
                  <span slot="title">课程信息管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/HostCourseInit">课程管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="3" v-show="isAdmin()">
                <template slot="title">
                  <i class="el-icon-collection"></i>
                  <span slot="title">图书管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/HostBookInit">图书添加删除修改</el-menu-item>
                  <el-menu-item index="/HostBookBorrow">借阅管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="4" v-show="isAdmin()">
                <template slot="title">
                  <i class="el-icon-edit"></i>
                  <span slot="title">考试管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/HostExamInit">考试信息管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="5" v-show="isAdmin()">
                <template slot="title">
                  <i class="el-icon-microphone"></i>
                  <span slot="title">公告管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/HostAnnounce">公告公布与删除</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="6" v-show="isAdmin()">
                <template slot="title">
                  <i class="el-icon-document-checked"></i>
                  <span slot="title">请假管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/HostAdminLeave">请假审批</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="7" v-show="isAdmin()">
                <template slot="title">
                  <i class="el-icon-document-checked"></i>
                  <span slot="title">业务功能扩展</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/HostFunctionAdd">业务功能管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </div>




          <div v-show="isStudent()">
            <el-menu
              default-active="3"
              :router= this.router
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              :collapse="isCollapse"
            >
            <!--        课程管理栏-->
            <el-submenu index="1" v-show="isStudent()">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">课程管理</span>
              </template>

              <el-menu-item-group>
                <el-menu-item index="/StudentScoreInfo">成绩查询</el-menu-item>
                <el-menu-item index="/StudentCourseInfo">课程信息查询</el-menu-item>
                <el-menu-item index="/StudentCourseSelect">选课系统</el-menu-item>
                <el-menu-item index="/StudentExamInit">考试信息查询</el-menu-item>
                <el-menu-item index="/StudentTeachAst">评教系统</el-menu-item>
              </el-menu-item-group>
            </el-submenu>


            <!--        课表管理栏-->
            <el-submenu index="2" v-show="isStudent()">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">请销假</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/StudentLeaveAdmin">请假管理</el-menu-item>
                <el-menu-item index="/StudentBackAdmin">销假管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <!--        个人信息管理栏-->
            <el-submenu index="3" v-show="isStudent()">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">个人信息</span>
              </template>

              <el-menu-item-group>
                <el-menu-item index="/StudentPasswordEdit">密码修改</el-menu-item>
                <el-menu-item index="/StudentInfoEdit">个人信息修改</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
          </div>


          <el-menu
            default-active="3"
            :router= this.router
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            :default-openeds="['7']">
            <!--教师页面-->
            <el-submenu index="7" v-show="isTeacher()">
              <template slot="title">
                <i class="el-icon-search"></i>
                <span slot="title">教师功能</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/TeacherScoreInfo">成绩管理</el-menu-item>
                <el-menu-item index="/TeacherCourseInfo">课程信息查询</el-menu-item>
                <el-menu-item index="/TeacherAst">评教结果查询</el-menu-item>
                <el-menu-item index="/TeacherPasswordEdit">密码修改</el-menu-item>
                <el-menu-item index="/TeacherInfoEdit">个人信息修改</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>

        </div>
        <router-view></router-view>
      </div>
    </el-main>
  </el-container>
</div>

</template>

<script>
import Header from '../../components/Header'
import StudentNAV from '../../components/StudentNAV'

// import axios from 'axios'

export default {

  name: 'App',
  data(){
    return {
      isCol: true,
      isCollapse: false,
      router:true,
      who:'TEACHER',
    }
  },
  components: {
    Header,StudentNAV,
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClick(row) {
      console.log(row);
    },
    isStudent(){
      if(this.who === 'STUDENT'){return true}
      else{return false}
    },
    isTeacher(){
      if(this.who === 'TEACHER'){return true}
      else{return false}
    },
    isAdmin(){
      if(this.who === 'ADMIN'){return true}
      else{return false}
    },
  },

  mounted() {
     this.who = sessionStorage.getItem('identity')
  },
}
</script>

<style>
    /*.el-header{*/
    /*    background-color: #3f51b5;*/
    /*    color: #333;*/
    /*    text-align: center;*/
    /*    line-height: 60px;*/
    /*    min-height:70px;*/
    /*    padding: 0px;*/
    /*}*/

    /*.el-aside {*/
    /*    background-color: #D3DCE6;*/
    /*    color: #333;*/
    /*    text-align: center;*/
    /*    line-height: 200px;*/
    /*}*/

    /*.el-main {*/
    /*    background-color: #E9EEF3;*/
    /*    color: #333;*/
    /*}*/

    .el-header, .el-footer {
        background-color: #3f51b5;
        color: #333;
        text-align: center;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #f0f1f9;
        color: #333;
        text-align: center;
    }

    .body{
      display: flex;
      flex-direction:row;
      background-color:#f0f1f9;
      min-height:1000px;
      padding:0px 10px 0px 0px;
    }
    .navbar{

    }
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }



    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 300px;
      min-height: 400px;
    }
</style>
